<template>
  <view class="container">
    <view class="header">
      <view class="title">选择要评价的商品</view>
      <view class="subtitle">订单中包含多件商品，请选择要评价的商品</view>
    </view>
    
    <view v-if="loading" class="loading">
      <view class="loading-spinner"></view>
      <text>加载中...</text>
    </view>
    
    <view v-else-if="orderItems.length === 0" class="empty-state">
      <image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image>
      <text class="empty-text">没有找到可评价的商品</text>
    </view>
    
    <view v-else class="product-list">
      <view 
        v-for="item in orderItems" 
        :key="item.id" 
        class="product-item"
        @click="goToReview(item)"
      >
        <image :src="item.product?.image || '/static/images/default-category.png'" class="product-image" mode="aspectFill"></image>
        <view class="product-info">
          <text class="product-name">{{ item.product?.name }}</text>
          <text class="product-specs">{{ formatSpecs(item.sku) }}</text>
          <view class="product-price-qty">
            <text class="product-price">¥{{ item.price }}</text>
            <text class="product-qty">x{{ item.quantity }}</text>
          </view>
        </view>
        <view class="product-status">
          <view class="status-badge" :class="{'reviewed': item.reviewStatus === 1}">
            {{ item.reviewStatus === 1 ? '已评价' : '去评价' }}
          </view>
          <text class="status-arrow">></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { orderApi } from '../../api/order.js';

// 响应式数据
const orderId = ref(null);
const orderItems = ref([]);
const loading = ref(true);

// 接收页面参数
onLoad((options) => {
  if (options.orderId) {
    orderId.value = options.orderId;
    loadOrderItems();
  } else {
    loading.value = false;
    uni.showToast({
      title: '订单ID不存在',
      icon: 'none'
    });
  }
});

// 加载订单商品
const loadOrderItems = async () => {
  loading.value = true;
  try {
    const res = await orderApi.getOrderDetail(orderId.value);
    if (res.code === 200 && res.data && res.data.items) {
      orderItems.value = res.data.items;
    } else {
      uni.showToast({
        title: '获取订单商品失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('加载订单商品失败:', error);
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};

// 格式化规格
const formatSpecs = (sku) => {
  if (!sku || !sku.specs) return '默认规格';
  try {
    if (typeof sku.specs === 'string') {
      if (/^[\u4e00-\u9fa5]/.test(sku.specs) || !sku.specs.startsWith('{')) {
        // 如果是中文字符开头或不是以{开头，直接返回原字符串
        return sku.specs;
      }
      const specs = JSON.parse(sku.specs);
      return Object.values(specs).join(' / ');
    }
    return Object.values(sku.specs).join(' / ');
  } catch (e) {
    console.error('规格解析错误:', e);
    return sku.specs || '默认规格';
  }
};

// 跳转到评价页面
const goToReview = (item) => {
  if (item.reviewStatus === 1) {
    // 已评价，显示提示
    uni.showToast({
      title: '该商品已评价',
      icon: 'none'
    });
    return;
  }
  
  // 准备商品信息和规格信息
  const productInfo = encodeURIComponent(JSON.stringify({
    id: item.product.id,
    name: item.product.name,
    image: item.product.image
  }));
  
  const specs = encodeURIComponent(formatSpecs(item.sku));
  
  // 跳转到评价页面
  uni.navigateTo({
    url: `/pages/review/index?orderId=${orderId.value}&itemId=${item.id}&productInfo=${productInfo}&specs=${specs}`
  });
};
</script>

<style>
.container {
  padding: 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.header {
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #ff6700;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 32rpx;
  color: #999;
}

.product-list {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.product-item {
  display: flex;
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
  align-items: center;
}

.product-item:last-child {
  border-bottom: none;
}

.product-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 8rpx;
  background-color: #f5f5f5;
  margin-right: 20rpx;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  line-height: 1.4;
}

.product-specs {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
  background-color: #f8f8f8;
  padding: 6rpx 12rpx;
  border-radius: 6rpx;
  display: inline-block;
}

.product-price-qty {
  display: flex;
  align-items: center;
}

.product-price {
  font-size: 28rpx;
  color: #ff6700;
  font-weight: bold;
  margin-right: 10rpx;
}

.product-qty {
  font-size: 24rpx;
  color: #999;
}

.product-status {
  display: flex;
  align-items: center;
}

.status-badge {
  font-size: 24rpx;
  color: #ff6700;
  background-color: rgba(255, 103, 0, 0.1);
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  margin-right: 10rpx;
}

.status-badge.reviewed {
  color: #999;
  background-color: #f5f5f5;
}

.status-arrow {
  font-size: 24rpx;
  color: #999;
}
</style> 